<template>
  <div id="signPeople">
    <div class="topi">
      <!-- <el-select v-model="eventId" placeholder="请选择">
                <el-option v-for="item in options"   :key="item.value" :label="item.label"
                :value="item.value">
                </el-option>
      </el-select>-->
      <el-select v-model="scheduleId" placeholder="选择日程">
        <el-option
          v-for="item in daylist"
          :key="item.schId"
          :label="item.operation"
          :value="item.schId"
        ></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search"  @click="getTableData(1)"></el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-for="col in tableCols" :key="col.id" :prop="col.prop" :label="col.label"></el-table-column>
    </el-table>
    <el-pagination
      class="pageinfo"
      background
      layout="total, prev, pager, next"
      :page-size="limit"
      @current-change="changeCurrentPage"
      :total="totals"
    ></el-pagination>
    <div style="clear:both"></div>
    <el-button class="goback" type="primary" @click="goback">返回</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableCols: [
        { id: 1, prop: "phone", label: "手机" },
        { id: 2, prop: "userName", label: "姓名/法号" },
        { id: 3, prop: "eventTitle", label: "活动名称" },
        { id: 4, prop: "onDate", label: "日程时间" },
        { id: 5, prop: "location", label: "参加地点" },
        { id: 6, prop: "signUpDate", label: "报名时间" },
        { id: 7, prop: "signUpNum", label: "参与人数" }
      ],
      options: [],
      scheduleId: "",
      eventId: "",
      daylist: [],
      currentPage: 1,
      totals: 0,
      limit: 10
    };
  },
  mounted() {
    this.getDayList();
    this.getTableData();
  },
  methods: {
    changeCurrentPage(page) {
      this.currentPage = page;
      this.getTableData();
    },
    getDayList() {
      // 活动日程下拉框
      let param = {
        eventId: this.$route.query.id
      };
      this.$api.apiGetDaySelect(param, res => {
        this.daylist = res.data;
      });
    },
    getTableData(data) {
      let param = {
        eventId: this.$route.query.id,
        scheduleId: this.scheduleId,
        page: data || this.currentPage,
        limit: this.limit
      };
      this.$api.apiGetSignPeople(param, res => {
        this.tableData = res.data;
        this.totals = res.pageInfo.total;
      });
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
#signPeople {
  .topi {
    display: flex;
    width: 80%;
    margin-bottom: 30px;
    .el-select:first-child {
      margin-right: 25px;
    }
  }
}
</style>
